npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Define remotes here, e.g., 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Add other exposed modules here
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Host Application
  
This is the host application.
  {isWidgetLoaded ? (
   Loading Widget...
}>
   
   
  ) : (
   
Loading...
  )}
  

Επεξήγηση:

• React.lazy(() => import('RemoteApp/Widget')): Αυτό εισάγει δυναμικά το module Widget από την RemoteApp. Το όνομα RemoteApp αντιστοιχεί στο όνομα που ορίστηκε στην ενότητα remotes της διαμόρφωσης Webpack του host. Το Widget αντιστοιχεί στο όνομα του module που ορίστηκε στην ενότητα exposes της διαμόρφωσης Webpack της remote εφαρμογής.
• React.Suspense: Χρησιμοποιείται για τη διαχείριση της ασύγχρονης φόρτωσης του remote module. Η ιδιότητα fallback καθορίζει ένα component που θα αποδίδεται κατά τη φόρτωση του module.

6. Εκτελέστε τις Εφαρμογές:

Ξεκινήστε τόσο την εφαρμογή host όσο και τη remote εφαρμογή χρησιμοποιώντας npm start (ή την προτιμώμενη μέθοδό σας). Βεβαιωθείτε ότι η remote εφαρμογή εκτελείται *πριν* από την εφαρμογή host.

Τώρα θα πρέπει να βλέπετε το remote widget να αποδίδεται μέσα στην εφαρμογή host.

Προηγμένες Τεχνικές Module Federation

Πέρα από τη βασική ρύθμιση, το Module Federation προσφέρει αρκετές προηγμένες τεχνικές για τη δημιουργία εξελιγμένων αρχιτεκτονικών micro-frontend.

1. Διαχείριση και Κοινή Χρήση Εκδόσεων:

Η αποτελεσματική διαχείριση των κοινόχρηστων εξαρτήσεων είναι ζωτικής σημασίας για τη διατήρηση της σταθερότητας και την αποφυγή διενέξεων. Το Module Federation παρέχει μηχανισμούς για τον καθορισμό εύρους εκδόσεων και singleton περιπτώσεων κοινόχρηστων modules. Η χρήση της ιδιότητας shared στη διαμόρφωση του Webpack σας επιτρέπει να ελέγχετε πώς φορτώνονται και διαχειρίζονται τα κοινόχρηστα modules.

Παράδειγμα:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: Διασφαλίζει ότι φορτώνεται μόνο μία περίπτωση του module, αποτρέποντας την επανάληψη και μειώνοντας το μέγεθος του bundle. Αυτό είναι ιδιαίτερα σημαντικό για βιβλιοθήκες όπως το React και το ReactDOM.
• requiredVersion: Καθορίζει το εύρος έκδοσης που απαιτεί η εφαρμογή. Το Webpack θα προσπαθήσει να φορτώσει μια συμβατή έκδοση του module.
• eager: true: Φορτώνει το module αμέσως, αντί για τεμπέλικη φόρτωση (lazily). Αυτό μπορεί να βελτιώσει την απόδοση σε ορισμένες περιπτώσεις, αλλά μπορεί επίσης να αυξήσει το αρχικό μέγεθος του bundle.

2. Δυναμικό Module Federation:

Αντί να κωδικοποιείτε σταθερά τις διευθύνσεις URL των remote εφαρμογών, μπορείτε να τις φορτώνετε δυναμικά από ένα αρχείο διαμόρφωσης ή ένα API endpoint. Αυτό σας επιτρέπει να ενημερώνετε την αρχιτεκτονική micro-frontend χωρίς να αναπτύσσετε ξανά την εφαρμογή host.

Παράδειγμα:

Δημιουργήστε ένα αρχείο διαμόρφωσης (π.χ., remote-config.json) που περιέχει τις διευθύνσεις URL των remote εφαρμογών:

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

Στην εφαρμογή host, ανακτήστε το αρχείο διαμόρφωσης και δημιουργήστε δυναμικά το αντικείμενο remotes:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... other configurations
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('Error reading remote-config.json:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('Error parsing remote-config.json:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

Σημαντική Σημείωση: Εξετάστε το ενδεχόμενο να χρησιμοποιήσετε μια πιο στιβαρή μέθοδο για την ανάκτηση της απομακρυσμένης διαμόρφωσης σε περιβάλλον παραγωγής, όπως ένα API endpoint ή μια ειδική υπηρεσία διαμόρφωσης. Το παραπάνω παράδειγμα χρησιμοποιεί το fs.readFile για λόγους απλότητας, αλλά αυτό γενικά δεν είναι κατάλληλο για αναπτύξεις σε παραγωγή.

3. Προσαρμοσμένες Στρατηγικές Φόρτωσης:

Το Module Federation σας επιτρέπει να προσαρμόσετε τον τρόπο φόρτωσης των remote modules. Μπορείτε να υλοποιήσετε προσαρμοσμένες στρατηγικές φόρτωσης για τη βελτιστοποίηση της απόδοσης ή για τη διαχείριση συγκεκριμένων σεναρίων, όπως η φόρτωση modules από ένα CDN ή η χρήση ενός service worker.

Το Webpack εκθέτει hooks που σας επιτρέπουν να παρεμβαίνετε και να τροποποιείτε τη διαδικασία φόρτωσης των modules. Αυτό επιτρέπει λεπτομερή έλεγχο του τρόπου ανάκτησης και αρχικοποίησης των remote modules.

4. Διαχείριση CSS και Στυλ:

Η κοινή χρήση CSS και στυλ μεταξύ των micro-frontends μπορεί να είναι δύσκολη. Το Module Federation υποστηρίζει διάφορες προσεγγίσεις για τη διαχείριση των στυλ, όπως:

• CSS Modules: Χρησιμοποιήστε CSS Modules για να ενσωματώσετε τα στυλ μέσα σε κάθε micro-frontend, αποτρέποντας τις διενέξεις και διασφαλίζοντας τη συνέπεια.
• Styled Components: Αξιοποιήστε τα styled components ή άλλες βιβλιοθήκες CSS-in-JS για τη διαχείριση των στυλ μέσα στα ίδια τα components.
• Global Styles: Φορτώστε τα global styles από μια κοινόχρηστη βιβλιοθήκη ή CDN. Να είστε προσεκτικοί με αυτή την προσέγγιση, καθώς μπορεί να οδηγήσει σε διενέξεις εάν τα στυλ δεν έχουν σωστό namespacing.

Παράδειγμα με χρήση CSS Modules:

Διαμορφώστε το Webpack για να χρησιμοποιεί CSS Modules:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... other rules
],
}

            

              
                Copy
              
            
          

Εισαγάγετε τα CSS Modules στα components σας:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. Επικοινωνία μεταξύ Micro-Frontends:

Τα micro-frontends συχνά χρειάζεται να επικοινωνούν μεταξύ τους για την ανταλλαγή δεδομένων ή την ενεργοποίηση ενεργειών. Υπάρχουν διάφοροι τρόποι για να το επιτύχετε αυτό:

• Shared Events: Χρησιμοποιήστε ένα global event bus για τη δημοσίευση και την εγγραφή σε events. Αυτό επιτρέπει στα micro-frontends να επικοινωνούν ασύγχρονα χωρίς άμεσες εξαρτήσεις.
• Custom Events: Αξιοποιήστε τα custom DOM events για επικοινωνία μεταξύ micro-frontends εντός της ίδιας σελίδας.
• Shared State Management: Χρησιμοποιήστε μια κοινόχρηστη βιβλιοθήκη διαχείρισης κατάστασης (π.χ., Redux, Zustand) για να κεντροποιήσετε την κατάσταση και να διευκολύνετε την κοινή χρήση δεδομένων.
• Direct Module Imports: Εάν τα micro-frontends είναι στενά συνδεδεμένα, μπορείτε να εισάγετε modules απευθείας το ένα από το άλλο χρησιμοποιώντας το Module Federation. Ωστόσο, αυτή η προσέγγιση πρέπει να χρησιμοποιείται με φειδώ για να αποφευχθεί η δημιουργία εξαρτήσεων που υπονομεύουν τα οφέλη των micro-frontends.
• APIs και Υπηρεσίες: Τα micro-frontends μπορούν να επικοινωνούν μεταξύ τους μέσω APIs και υπηρεσιών, επιτρέποντας χαλαρή σύζευξη και μεγαλύτερη ευελιξία. Αυτό είναι ιδιαίτερα χρήσιμο όταν τα micro-frontends αναπτύσσονται σε διαφορετικούς τομείς ή έχουν διαφορετικές απαιτήσεις ασφαλείας.

Οφέλη της Χρήσης του Module Federation για Micro-Frontends

• Βελτιωμένη Επεκτασιμότητα: Τα micro-frontends μπορούν να επεκταθούν ανεξάρτητα, επιτρέποντάς σας να κατανέμετε πόρους όπου χρειάζονται περισσότερο.
• Αυξημένη Συντηρησιμότητα: Οι μικρότερες βάσεις κώδικα είναι ευκολότερες στην κατανόηση και τη συντήρηση, μειώνοντας τον κίνδυνο σφαλμάτων και βελτιώνοντας την παραγωγικότητα των προγραμματιστών.
• Ταχύτεροι Κύκλοι Ανάπτυξης: Τα micro-frontends μπορούν να αναπτυχθούν ανεξάρτητα, επιτρέποντας ταχύτερους κύκλους επανάληψης και γρηγορότερη κυκλοφορία νέων χαρακτηριστικών.
• Τεχνολογική Ποικιλομορφία: Οι ομάδες μπορούν να επιλέξουν τις τεχνολογίες και τα frameworks που ταιριάζουν καλύτερα στις ανάγκες τους, προωθώντας την καινοτομία και επιτρέποντας τη χρήση εξειδικευμένων δεξιοτήτων.
• Ενισχυμένη Αυτονομία Ομάδας: Κάθε micro-frontend ανήκει σε μια αφοσιωμένη ομάδα, προωθώντας την ιδιοκτησία και την υπευθυνότητα.
• Απλοποιημένη Ενσωμάτωση (Onboarding): Οι νέοι προγραμματιστές μπορούν να εξοικειωθούν γρήγορα με μικρότερες, πιο διαχειρίσιμες βάσεις κώδικα.

Προκλήσεις της Χρήσης του Module Federation

• Αυξημένη Πολυπλοκότητα: Οι αρχιτεκτονικές micro-frontend μπορεί να είναι πιο πολύπλοκες από τις παραδοσιακές μονολιθικές αρχιτεκτονικές, απαιτώντας προσεκτικό σχεδιασμό και συντονισμό.
• Διαχείριση Κοινόχρηστων Εξαρτήσεων: Η διαχείριση των κοινόχρηστων εξαρτήσεων μπορεί να είναι δύσκολη, ειδικά όταν διαφορετικά micro-frontends χρησιμοποιούν διαφορετικές εκδόσεις της ίδιας βιβλιοθήκης.
• Επιβάρυνση Επικοινωνίας: Η επικοινωνία μεταξύ των micro-frontends μπορεί να εισαγάγει επιβάρυνση και καθυστέρηση.
• Δοκιμές Ενσωμάτωσης (Integration Testing): Ο έλεγχος της ενσωμάτωσης των micro-frontends μπορεί να είναι πιο πολύπλοκος από τον έλεγχο μιας μονολιθικής εφαρμογής.
• Αρχική Επιβάρυνση Ρύθμισης: Η διαμόρφωση του Module Federation και η ρύθμιση της αρχικής υποδομής μπορεί να απαιτήσει σημαντική προσπάθεια.

Παραδείγματα από τον Πραγματικό Κόσμο και Περιπτώσεις Χρήσης

Το Module Federation χρησιμοποιείται από έναν αυξανόμενο αριθμό εταιρειών για τη δημιουργία μεγάλων, σύνθετων web εφαρμογών. Ακολουθούν ορισμένα παραδείγματα από τον πραγματικό κόσμο και περιπτώσεις χρήσης:

• Πλατφόρμες Ηλεκτρονικού Εμπορίου: Μεγάλες πλατφόρμες ηλεκτρονικού εμπορίου χρησιμοποιούν συχνά micro-frontends για τη διαχείριση διαφορετικών τμημάτων του ιστότοπου, όπως ο κατάλογος προϊόντων, το καλάθι αγορών και η διαδικασία ολοκλήρωσης αγοράς. Για παράδειγμα, ένας Γερμανός λιανοπωλητής μπορεί να χρησιμοποιεί ένα ξεχωριστό micro-frontend για την εμφάνιση προϊόντων στα γερμανικά, ενώ ένας Γάλλος λιανοπωλητής χρησιμοποιεί ένα διαφορετικό micro-frontend για γαλλικά προϊόντα, και τα δύο ενσωματωμένα σε μια ενιαία εφαρμογή host.
• Χρηματοπιστωτικά Ιδρύματα: Τράπεζες και χρηματοπιστωτικά ιδρύματα χρησιμοποιούν micro-frontends για τη δημιουργία σύνθετων τραπεζικών εφαρμογών, όπως portals online banking, επενδυτικές πλατφόρμες και συστήματα συναλλαγών. Μια παγκόσμια τράπεζα μπορεί να έχει ομάδες σε διαφορετικές χώρες που αναπτύσσουν micro-frontends για διαφορετικές περιοχές, το καθένα προσαρμοσμένο στους τοπικούς κανονισμούς και τις προτιμήσεις των πελατών.
• Συστήματα Διαχείρισης Περιεχομένου (CMS): Οι πλατφόρμες CMS μπορούν να χρησιμοποιούν micro-frontends για να επιτρέπουν στους χρήστες να προσαρμόζουν την εμφάνιση και τη λειτουργικότητα των ιστοτόπων τους. Για παράδειγμα, μια καναδική εταιρεία που παρέχει υπηρεσίες CMS μπορεί να επιτρέπει στους χρήστες να προσθέτουν ή να αφαιρούν διαφορετικά micro-frontends (widgets) στον ιστότοπό τους για να προσαρμόσουν τη λειτουργικότητά του.
• Πίνακες Ελέγχου και Πλατφόρμες Ανάλυσης: Τα micro-frontends είναι κατάλληλα για τη δημιουργία πινάκων ελέγχου και πλατφορμών ανάλυσης, όπου διαφορετικές ομάδες μπορούν να συνεισφέρουν διαφορετικά widgets και οπτικοποιήσεις.
• Εφαρμογές Υγειονομικής Περίθαλψης: Οι πάροχοι υγειονομικής περίθαλψης χρησιμοποιούν micro-frontends για τη δημιουργία πυλών ασθενών, συστημάτων ηλεκτρονικών φακέλων υγείας (EHR) και πλατφορμών τηλεϊατρικής.

Βέλτιστες Πρακτικές για την Υλοποίηση του Module Federation

Για να διασφαλίσετε την επιτυχία της υλοποίησης του Module Federation, ακολουθήστε αυτές τις βέλτιστες πρακτικές:

• Σχεδιάστε Προσεκτικά: Πριν ξεκινήσετε, σχεδιάστε προσεκτικά την αρχιτεκτονική micro-frontend και ορίστε σαφή όρια μεταξύ των διαφορετικών εφαρμογών.
• Δημιουργήστε Σαφείς Διαύλους Επικοινωνίας: Δημιουργήστε σαφείς διαύλους επικοινωνίας μεταξύ των ομάδων που είναι υπεύθυνες για τα διάφορα micro-frontends.
• Αυτοματοποιήστε την Ανάπτυξη: Αυτοματοποιήστε τη διαδικασία ανάπτυξης για να διασφαλίσετε ότι τα micro-frontends μπορούν να αναπτυχθούν γρήγορα και αξιόπιστα.
• Παρακολουθήστε την Απόδοση: Παρακολουθήστε την απόδοση της αρχιτεκτονικής micro-frontend για τον εντοπισμό και την αντιμετώπιση τυχόν σημείων συμφόρησης.
• Υλοποιήστε Στιβαρό Χειρισμό Σφαλμάτων: Υλοποιήστε στιβαρό χειρισμό σφαλμάτων για την πρόληψη αλυσιδωτών αποτυχιών και για να διασφαλίσετε ότι η εφαρμογή παραμένει ανθεκτική.
• Χρησιμοποιήστε Συνεπές Στυλ Κώδικα: Επιβάλλετε ένα συνεπές στυλ κώδικα σε όλα τα micro-frontends για να βελτιώσετε τη συντηρησιμότητα.
• Τεκμηριώστε τα Πάντα: Τεκμηριώστε την αρχιτεκτονική, τις εξαρτήσεις και τα πρωτόκολλα επικοινωνίας για να διασφαλίσετε ότι το σύστημα είναι κατανοητό και συντηρήσιμο.
• Εξετάστε τις Επιπτώσεις στην Ασφάλεια: Εξετάστε προσεκτικά τις επιπτώσεις στην ασφάλεια της αρχιτεκτονικής micro-frontend και εφαρμόστε τα κατάλληλα μέτρα ασφαλείας. Διασφαλίστε τη συμμόρφωση με παγκόσμιους κανονισμούς προστασίας δεδομένων όπως ο GDPR και ο CCPA.

Συμπέρασμα

Το JavaScript Module Federation με το Webpack 5 παρέχει έναν ισχυρό και ευέλικτο τρόπο για τη δημιουργία αρχιτεκτονικών micro-frontend. Διασπώντας τις μεγάλες εφαρμογές σε μικρότερες, ανεξάρτητα αναπτυσσόμενες μονάδες, μπορείτε να βελτιώσετε την επεκτασιμότητα, τη συντηρησιμότητα και την αυτονομία των ομάδων. Ενώ υπάρχουν προκλήσεις που σχετίζονται με την υλοποίηση των micro-frontends, τα οφέλη συχνά υπερτερούν του κόστους, ειδικά για σύνθετες web εφαρμογές. Ακολουθώντας τις βέλτιστες πρακτικές που περιγράφονται σε αυτόν τον οδηγό, μπορείτε να αξιοποιήσετε με επιτυχία το Module Federation για να δημιουργήσετε στιβαρές και επεκτάσιμες αρχιτεκτονικές micro-frontend που καλύπτουν τις ανάγκες του οργανισμού σας και των χρηστών παγκοσμίως.